<template>
  <div class="login-container">
    <div class="login-box">
      <h2>用户登录</h2>
      <el-form :model="loginForm" :rules="rules" ref="loginForm" class="login-form">
        <el-form-item prop="phoneOrEmail">
          <el-input 
            v-model="loginForm.phoneOrEmail" 
            prefix-icon="el-icon-mobile-phone"
            placeholder="请输入手机号或邮箱">
          </el-input>
        </el-form-item>
        
        <el-form-item prop="password">
          <el-input 
            v-model="loginForm.password" 
            prefix-icon="el-icon-lock"
            type="password"
            placeholder="请输入密码"
            show-password>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="login-button" @click="handleLogin">登录</el-button>
        </el-form-item>

        <div class="register-link">
          还没有账号？<router-link to="/register">立即注册</router-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginPage',
  data() {
  return {
    loginForm: {
      phoneOrEmail: '', // 手机号或邮箱
      password: ''
    },
    rules: {
      phoneOrEmail: [
        { required: true, message: '请输入手机号或邮箱', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
      ]
    }
  }
},
  methods: {
  handleLogin() {
    const { phoneOrEmail, password } = this.loginForm;
    console.log('输入的手机号/邮箱和密码:', phoneOrEmail, password);

    const user = this.findUser(phoneOrEmail, password); // 调用 findUser 方法
    console.log('找到的用户:', user);

    if (user) {
      console.log('登录成功');
      localStorage.setItem('currentUser', JSON.stringify(user));
      this.$emit('login-success', user);
      this.$router.push('/');
    } else {
      console.log('登录失败');
      this.$message.error('手机号/邮箱或密码错误');
    }
  },
  findUser(phoneOrEmail, password) {
    const users = JSON.parse(localStorage.getItem('users') || '[]');
    const merchants = JSON.parse(localStorage.getItem('merchants') || '[]');
    const allUsers = [...users, ...merchants];
    console.log('所有用户数据:', allUsers);

    // 查找匹配的用户
    return allUsers.find(user => 
      (user.phone === phoneOrEmail || user.email === phoneOrEmail) && 
      user.password === password
    );
  }
}
}
</script>

<style scoped>
.login-container {
  min-height: calc(100vh - 200px);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  padding: 40px 0;
}

.login-box {
  width: 400px;
  padding: 40px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.login-box h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.login-form {
  margin-top: 20px;
}

.login-button {
  width: 100%;
  padding: 12px 0;
}

.register-link {
  text-align: center;
  margin-top: 20px;
  color: #666;
}

.register-link a {
  color: #409EFF;
  text-decoration: none;
}
</style> 